<template>
  <div id="home" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" class="hide-scrollbar"
    style="overflow-x: hidden;">
    <div class="header">
      <div class="time">
        <div class="day">{{ currentDateInfo.day }}</div>
        <div class="month-years">{{ currentDateInfo.monthYear }}</div>
      </div>
      <div class="temperature">
        <span>地球</span>&nbsp;·&nbsp;<span>对流层</span>&nbsp;&nbsp;<span>-273.15℃</span>
      </div>
    </div>

    <div class="main" v-if="allDaysData[currentIndex] && allDaysData[currentIndex].length > 0"
      :style="{ transform: `translateX(${translateX}px)`, transition: isTransition ? 'transform 0.3s' : 'none' }">
      <div class="part-one">
        <div class="daily-recommend">
          <div class="recommend-img">
            <div v-if="!getImageLoaded(0)" class="skeleton-placeholder">
              <van-skeleton :row="0" :loading="true" class="skeleton-img">
                <template slot="template">
                  <div class="skeleton-image"></div>
                </template>
              </van-skeleton>
            </div>
            <img :src="recommendList[0].img_url" alt="" @load="onImageLoad(0)" @error="onImageError(0)"
              :style="{ display: getImageLoaded(0) ? 'block' : 'none' }">
          </div>
          <div class="photographer">摄影 | {{ recommendList[0].pic_info }}</div>
          <div class="recommend-text" v-html="recommendList[0].forward.replace(/\r\n/g, '<br>')"></div>
          <div class="recommend-text-author">{{ recommendList[0].words_info }}</div>
        </div>
        <div class="re-bottom">
          <div class="left">
            <i class="recommend-iconfont icon-xiaoji"></i>
            <span>小记</span>
          </div>
          <div class="right">
            <i class="one-icon one-icon-note"></i>
            <i class="recommend-iconfont icon-favorites favorites"></i>
            <div class="like">
              <i class="one-icon" :class="recommendList[0].isLiked ? 'one-icon-liked' : 'one-icon-like'"
                @click="toggleLike(recommendList[0])"></i>
              <span>{{ recommendList[0].like_count }}</span>
            </div>
            <i class="recommend-iconfont icon-share"></i>
          </div>
        </div>
      </div>

      <div class="part-two">
        <div class="clickable-area" @click="openReadingDetail(recommendList[1])">
          <div class="category-name">- 阅读 -</div>
          <div class="title">{{ recommendList[1].title }}</div>
          <div class="author-name">文 / {{ recommendList[1].author.user_name }}</div>
          <div class="forward">{{ recommendList[1].forward }}</div>
          <div class="image">
            <div v-if="!getImageLoaded(1)" class="skeleton-placeholder">
              <van-skeleton :row="0" :loading="true" class="skeleton-img">
                <template slot="template">
                  <div class="skeleton-image"></div>
                </template>
              </van-skeleton>
            </div>
            <img :src="recommendList[1].img_url" alt="" @load="onImageLoad(1)" @error="onImageError(1)"
              :style="{ display: getImageLoaded(1) ? 'block' : 'none' }">
          </div>
        </div>
        <div class="part-bottom">
          <div class="right-icon">
            <div class="like">
              <i class="one-icon" :class="recommendList[1].isLiked ? 'one-icon-liked' : 'one-icon-like'"
                @click="toggleLike(recommendList[1])"></i>
              <span>{{ recommendList[1].like_count }}</span>
            </div>
            <i class="recommend-iconfont icon-share"></i>
          </div>
        </div>
      </div>

      <div class="part-three">
        <div class="clickable-area" @click="handlePartThreeClick(recommendList[2])">
          <div class="category-name">- {{ recommendList[2].tag_list.length == 0 ? '问答' :
            recommendList[2].tag_list[0].title }}
            -</div>
          <div class="title" v-if="recommendList[2]">{{ recommendList[2].title }}</div>
          <div class="author-name" v-if="recommendList[2] && recommendList[2].answerer">{{
            recommendList[2].answerer.user_name }}答</div>
          <div class="forward" v-if="recommendList[2]">{{ recommendList[2].forward }}</div>
          <div class="image" v-if="recommendList[2]">
            <div v-if="!getImageLoaded(2)" class="skeleton-placeholder">
              <van-skeleton :row="0" :loading="true" class="skeleton-img">
                <template slot="template">
                  <div class="skeleton-image"></div>
                </template>
              </van-skeleton>
            </div>
            <img :src="recommendList[2].img_url" alt="" @load="onImageLoad(2)" @error="onImageError(2)"
              :style="{ display: getImageLoaded(2) ? 'block' : 'none' }">
          </div>
        </div>
        <div class="part-bottom">
          <div class="right-icon">
            <div class="like">
              <i class="one-icon" :class="recommendList[2].isLiked ? 'one-icon-liked' : 'one-icon-like'"
                @click="toggleLike(recommendList[2])"></i>
              <span>{{ recommendList[2].like_count }}</span>
            </div>
            <i class="recommend-iconfont icon-share"></i>
          </div>
        </div>
      </div>

      <div class="part-four" v-if="recommendList.length > 3">
        <div class="category-name">- 收音机 -</div>
        <div class="image-wrapper" v-if="recommendList[3]">
          <div v-if="!getCoverLoaded(3)" class="skeleton-placeholder">
            <van-skeleton :row="0" :loading="true" class="skeleton-img">
              <template slot="template">
                <div class="skeleton-image"></div>
              </template>
            </van-skeleton>
          </div>
          <div class="image" :style="getCoverLoaded(3) ? `background-image: url(${recommendList[3].img_url})` : 'none'"
            @click="openRadioDetail(recommendList[3])" :class="{ 'image-hidden': !getCoverLoaded(3) }">
            <div class="part-four-title">{{ recommendList[3].title }}</div>
            <i class="play-icon" @click.stop="playAudio(recommendList[3])"></i>
          </div>
          <img :src="recommendList[3].img_url" alt="" style="display: none;" @load="onCoverLoad(3)"
            @error="onCoverError(3)">
        </div>
        <div class="part-bottom" v-if="recommendList[3]">
          <div class="left" v-if="recommendList[3].author">
            <div class="avatar-wrapper">
              <div v-if="!getAvatarLoaded(3)" class="skeleton-placeholder-avatar">
                <van-skeleton :row="0" :loading="true" class="skeleton-avatar">
                  <template slot="template">
                    <div class="skeleton-avatar-image"></div>
                  </template>
                </van-skeleton>
              </div>
              <div class="avatar"
                :style="getAvatarLoaded(3) ? `background-image: url(${recommendList[3].author.web_url})` : 'none'"
                :class="{ 'avatar-hidden': !getAvatarLoaded(3) }">
              </div>
              <img :src="recommendList[3].author.web_url" alt="" style="display: none;" @load="onAvatarLoad(3)"
                @error="onAvatarError(3)">
            </div>
            <span>{{ recommendList[3].author.user_name }}</span>
          </div>
          <div class="right-icon">
            <div class="like">
              <i class="one-icon" :class="recommendList[3].isLiked ? 'one-icon-liked' : 'one-icon-like'"
                @click="toggleLike(recommendList[3])"></i>
              <span>{{ recommendList[3].like_count }}</span>
            </div>
            <i class="recommend-iconfont icon-share"></i>
          </div>
        </div>
      </div>

      <div class="main-bottom"> &lt;&lt;&nbsp;滑动查看 上一个</div>
    </div>

    <!-- 阅读详情组件 -->
    <ReadingDetail v-if="readingDetailVisible" :articleId="currentArticleId" :isVisible="readingDetailVisible"
      @close="closeReadingDetail" @article-change="handleArticleChange" />

    <!-- 电台详情组件 -->
    <RadioDetail v-if="radioDetailVisible" :radioId="currentRadioId" :isVisible="radioDetailVisible"
      :currentDetailItem="currentRadioItem" @close="closeRadioDetail" />

    <!-- 问答详情组件 -->
    <QADetail v-if="qaDetailVisible" :articleId="currentQAId" :isVisible="qaDetailVisible" @close="closeQADetail" />
  </div>
</template>

<script>
import { getDailyContent, getDateString } from '../api/api';
import ReadingDetail from '../components/ReadingDetail.vue';
import RadioDetail from '../components/RadioDetail.vue';
import QADetail from '../components/QADetail.vue';
import { mapActions } from 'vuex';

export default {
  components: {
    ReadingDetail,
    RadioDetail,
    QADetail
  },
  data() {
    return {
      allDaysData: [], // 存储多天的数据
      currentIndex: 0, // 当前显示的天数索引
      daysLoaded: 0, // 已加载的天数
      startX: 0, // 触摸开始位置X坐标
      startY: 0, // 触摸开始位置Y坐标
      moveX: 0, // 触摸移动位置X坐标
      moveY: 0, // 触摸移动位置Y坐标
      translateX: 0, // 主内容区域平移距离
      isTransition: false, // 是否启用过渡动画
      screenWidth: 0, // 屏幕宽度
      isLoading: false, // 是否正在加载数据
      lockDirection: null, // 锁定的滑动方向：'horizontal'水平方向，'vertical'垂直方向，null未锁定
      monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // 月份名称数组
      // 详情页相关数据
      readingDetailVisible: false,
      radioDetailVisible: false,
      qaDetailVisible: false,
      currentArticleId: '',
      currentRadioId: '',
      currentRadioItem: null, // 当前电台项目（用于详情页播放音频）
      currentQAId: ''
    };
  },
  computed: {
    recommendList() {
      return this.allDaysData[this.currentIndex] || [];
    },
    currentDateInfo() {
      // 计算当前显示的日期信息
      const date = new Date();
      const currentHour = date.getHours();

      // 如果当前时间未过早上8点，则额外减去一天
      let actualIndex = this.currentIndex;
      if (currentHour < 8) {
        actualIndex = this.currentIndex + 1;
      }

      date.setDate(date.getDate() - actualIndex);

      const day = String(date.getDate()).padStart(2, '0');
      const month = this.monthNames[date.getMonth()];
      const year = date.getFullYear();

      return {
        day,
        monthYear: `${month} ${year}`
      };
    }
  },
  methods: {
    // 映射音频store的actions
    ...mapActions('audio', ['initAudio', 'togglePlay', 'pauseAudio']),

    // 触摸开始事件
    touchStart(e) {
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
      this.isTransition = false;
      this.lockDirection = null; // 重置方向锁定
    },

    // 触摸移动事件
    touchMove(e) {
      this.moveX = e.touches[0].clientX;
      this.moveY = e.touches[0].clientY;
      const diffX = this.moveX - this.startX;
      const diffY = this.moveY - this.startY;

      // 如果方向尚未锁定，则根据初始移动方向确定锁定方向
      if (this.lockDirection === null) {
        // 判断滑动方向，水平移动距离大于垂直移动距离的绝对值，则锁定为水平方向
        if (Math.abs(diffX) > Math.abs(diffY)) {
          this.lockDirection = 'horizontal';
        } else {
          this.lockDirection = 'vertical';
        }
      }

      // 只有在水平方向锁定时才处理左右滑动
      if (this.lockDirection === 'horizontal') {
        // 计算20vw的像素值
        const maxTranslate = this.screenWidth * 0.2;

        // 阻止默认行为，防止页面滚动
        e.preventDefault();

        // 限制左右滑动的最大位移为20vw
        if (diffX > 0) {
          // 右滑，最大位移为20vw
          this.translateX = Math.min(diffX, maxTranslate);
        } else {
          // 左滑，最大位移为-20vw
          this.translateX = Math.max(diffX, -maxTranslate);
        }
      }
      // 垂直方向锁定时，不处理左右滑动，保持正常的上下滚动
      else if (this.lockDirection === 'vertical') {
        // 不做任何处理，允许默认的垂直滚动
        this.translateX = 0;
      }
    },

    // 触摸结束事件
    touchEnd() {
      this.isTransition = true;

      // 只有在水平方向锁定时才处理左右滑动结束事件
      if (this.lockDirection === 'horizontal') {
        const diffX = this.moveX - this.startX;

        // 如果向左滑动超过屏幕宽度的1/3，则切换到下一天
        if (diffX < -this.screenWidth / 3) {
          this.switchToNextDay();
        }
        // 如果向右滑动超过屏幕宽度的1/3，则切换到上一天
        else if (diffX > this.screenWidth / 3) {
          this.switchToPreviousDay();
        } else {
          // 否则回到原位
          this.translateX = 0;
        }
      } else {
        // 垂直方向滑动结束，重置水平位移
        this.translateX = 0;
      }

      // 重置方向锁定
      this.lockDirection = null;
    },

    // 切换到下一天
    switchToNextDay() {
      // 检查是否需要加载更多数据
      if (this.currentIndex >= this.daysLoaded - 2) {
        this.loadMoreDays();
      }

      // 如果有下一天的数据，则切换
      if (this.currentIndex < this.allDaysData.length - 1) {
        this.currentIndex++;
        this.translateX = 0;
        // 滚动到顶部
        document.getElementById('home').scrollTop = 0;
      } else {
        // 否则回到原位
        this.translateX = 0;
      }

    },

    // 切换到上一天
    switchToPreviousDay() {
      // 如果不是第一天，则可以切换到上一天
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.translateX = 0;
        // 滚动到顶部
        document.getElementById('home').scrollTop = 0;
      } else {
        // 否则回到原位
        this.translateX = 0;
      }
    },

    // 加载更多天的数据
    loadMoreDays() {
      if (this.isLoading) return;

      this.isLoading = true;

      // 计算需要加载的天数范围
      const startDay = this.daysLoaded;
      const endDay = this.daysLoaded + 2; // 每次加载3天

      const promises = [];

      // 加载多天的数据
      for (let i = startDay; i <= endDay; i++) {
        promises.push(
          getDailyContent(getDateString(i))
            .then(res => {
              // 添加数据验证，确保res.data存在且有content_list属性
              if (res && res.data && res.data.content_list) {
                // 为每个元素添加 isLiked 属性和图片加载状态
                const content_list = res.data.content_list.map(item => ({
                  ...item,
                  isLiked: false,
                  imageLoaded: false,
                  coverLoaded: false,
                  avatarLoaded: false
                }));

                // 确保allDaysData数组有足够的空间
                if (!this.allDaysData[i]) {
                  this.$set(this.allDaysData, i, content_list);
                } else {
                  this.allDaysData[i] = content_list;
                }

                // 检查图片是否已经在缓存中
                this.$nextTick(() => {
                  content_list.forEach((item, idx) => {
                    if (item.img_url && !item.imageLoaded) {
                      this.checkImageLoaded(item, item.img_url, 'imageLoaded');
                    }
                    if (idx === 3 && item.img_url && !item.coverLoaded) {
                      this.checkImageLoaded(item, item.img_url, 'coverLoaded');
                    }
                    if (idx === 3 && item.author && item.author.web_url && !item.avatarLoaded) {
                      this.checkImageLoaded(item, item.author.web_url, 'avatarLoaded');
                    }
                  });
                });
              } else {
                // 如果没有数据，设置为空数组
                if (!this.allDaysData[i]) {
                  this.$set(this.allDaysData, i, []);
                } else {
                  this.allDaysData[i] = [];
                }
                console.warn(`日期 ${getDateString(i)} 没有返回有效数据`);
              }
              return i;
            })
        );
      }

      // 等待所有请求完成
      Promise.all(promises)
        .then(() => {
          this.daysLoaded = endDay + 1;
          this.isLoading = false;
        })
        .catch(err => {
          console.log(err);
          this.isLoading = false;
          // 即使出错也继续，确保用户体验不中断
          this.daysLoaded = Math.max(this.daysLoaded, startDay + 1);
        });
    },

    // 初始化加载前3天的数据
    initLoad() {
      this.loadMoreDays();
    },

    toggleLike(item) {
      // 检查登录状态
      const isLoggedIn = localStorage.getItem('isLoggedIn');
      if (isLoggedIn !== 'true') {
        // 未登录，先显示提示，然后显示登录组件
        this.$toast({
          message: '请先登录账号',
          position: 'top',
        });
        // 延迟显示登录组件，让用户看到提示
        setTimeout(() => {
          this.$root.$emit('showLoginRegister', this.$route.path);
        }, 300);
        return;
      }

      if (item.isLiked) {
        item.like_count--;
      } else {
        item.like_count++;
      }
      item.isLiked = !item.isLiked;
    },

    // 打开阅读详情页
    openReadingDetail(item) {
      this.currentArticleId = item.item_id;
      this.readingDetailVisible = true;
    },

    // 关闭阅读详情页
    closeReadingDetail() {
      this.readingDetailVisible = false;
      this.currentArticleId = '';
    },

    // 打开电台详情页
    openRadioDetail(item) {
      this.currentRadioId = item.item_id;
      // 保存当前电台项目，转换为详情页需要的格式（包含 id 和 audio_url）
      // 优先使用 audio_url，如果没有则使用 audio（兼容不同数据格式）
      this.currentRadioItem = {
        id: item.item_id,
        audio_url: item.audio_url || item.audio
      };
      this.radioDetailVisible = true;
    },

    // 关闭电台详情页
    closeRadioDetail() {
      this.radioDetailVisible = false;
      this.currentRadioId = '';
      this.currentRadioItem = null;
    },

    // 处理 part-three 的点击事件
    handlePartThreeClick(item) {
      if (!item) return;

      // 判断 tag_list[0].title 是否为 '轻阅读'
      if (item.tag_list && item.tag_list.length > 0 && item.tag_list[0].title === '轻阅读') {
        this.openReadingDetail(item);
      } else {
        // 否则打开问答详情页
        this.openQADetail(item);
      }
    },

    // 打开问答详情页
    openQADetail(item) {
      this.currentQAId = item.item_id;
      this.qaDetailVisible = true;
    },

    // 关闭问答详情页
    closeQADetail() {
      this.qaDetailVisible = false;
      this.currentQAId = '';
    },

    // 播放音频
    playAudio(item) {
      // 优先使用 audio_url，如果没有则使用 audio（兼容不同数据格式）
      const audioUrl = item.audio_url || item.audio;
      if (audioUrl) {
        const audioInfo = {
          id: item.item_id,
          audio_url: audioUrl
        };
        this.togglePlay(audioInfo);
      }
    },

    // 处理文章切换事件（ReadingDetail组件需要）
    handleArticleChange(newArticleId) {
      this.currentArticleId = newArticleId;
    },

    // 获取图片加载状态（安全检查）
    getImageLoaded(index) {
      return this.recommendList[index] && this.recommendList[index].imageLoaded === true;
    },

    // 获取封面加载状态（安全检查）
    getCoverLoaded(index) {
      return this.recommendList[index] && this.recommendList[index].coverLoaded === true;
    },

    // 获取头像加载状态（安全检查）
    getAvatarLoaded(index) {
      return this.recommendList[index] && this.recommendList[index].avatarLoaded === true;
    },

    // 检查当前列表的图片状态
    checkCurrentListImages() {
      const list = this.recommendList;
      if (!list || list.length === 0) return;

      // 使用 nextTick 确保 DOM 已更新
      this.$nextTick(() => {
        // 检查第一张图片（日签）
        if (list[0] && list[0].img_url && list[0].imageLoaded !== true) {
          this.checkImageLoaded(list[0], list[0].img_url, 'imageLoaded');
        }

        // 检查第二张图片（阅读）
        if (list[1] && list[1].img_url && list[1].imageLoaded !== true) {
          this.checkImageLoaded(list[1], list[1].img_url, 'imageLoaded');
        }

        // 检查第三张图片（小记）
        if (list[2] && list[2].img_url && list[2].imageLoaded !== true) {
          this.checkImageLoaded(list[2], list[2].img_url, 'imageLoaded');
        }

        // 检查第四张图片（收音机封面）
        if (list[3] && list[3].img_url && list[3].coverLoaded !== true) {
          this.checkImageLoaded(list[3], list[3].img_url, 'coverLoaded');
        }

        // 检查收音机作者头像
        if (list[3] && list[3].author && list[3].author.web_url && list[3].avatarLoaded !== true) {
          this.checkImageLoaded(list[3], list[3].author.web_url, 'avatarLoaded');
        }

        // 直接检查 DOM 中的图片元素
        this.checkDOMImages();
      });
    },

    // 检查 DOM 中的图片元素是否已加载
    checkDOMImages() {
      const container = document.getElementById('home');
      if (!container) return;

      const images = container.querySelectorAll('img');
      images.forEach((img) => {
        if (img.complete && img.naturalWidth > 0) {
          // 图片已加载，找到对应的数据项并更新状态
          const list = this.recommendList;
          const src = img.src;

          if (list[0] && list[0].img_url && src.includes(list[0].img_url.split('/').pop()) && list[0].imageLoaded !== true) {
            this.$set(list[0], 'imageLoaded', true);
          } else if (list[1] && list[1].img_url && src.includes(list[1].img_url.split('/').pop()) && list[1].imageLoaded !== true) {
            this.$set(list[1], 'imageLoaded', true);
          } else if (list[2] && list[2].img_url && src.includes(list[2].img_url.split('/').pop()) && list[2].imageLoaded !== true) {
            this.$set(list[2], 'imageLoaded', true);
          } else if (list[3] && list[3].img_url && src.includes(list[3].img_url.split('/').pop()) && list[3].coverLoaded !== true) {
            this.$set(list[3], 'coverLoaded', true);
          } else if (list[3] && list[3].author && list[3].author.web_url && src.includes(list[3].author.web_url.split('/').pop()) && list[3].avatarLoaded !== true) {
            this.$set(list[3], 'avatarLoaded', true);
          }
        }
      });
    },

    // 检查图片是否已经加载（处理缓存情况）
    checkImageLoaded(item, imgUrl, type = 'imageLoaded') {
      if (!item || !imgUrl || item[type] === true) return;

      const img = new Image();

      img.onload = () => {
        if (item[type] !== true) {
          this.$set(item, type, true);
        }
      };
      img.onerror = () => {
        if (item[type] !== true) {
          this.$set(item, type, true);
        }
      };

      // 设置 src
      img.src = imgUrl;

      // 如果图片已经在缓存中，立即设置
      if (img.complete) {
        this.$set(item, type, true);
      } else {
        // 如果不在缓存中，设置一个超时，防止一直显示骨架屏
        setTimeout(() => {
          if (item[type] !== true) {
            this.$set(item, type, true);
          }
        }, 5000); // 5秒后强制显示图片（即使加载失败）
      }
    },

    // 图片加载成功（普通img标签）
    onImageLoad(index) {
      if (this.recommendList[index]) {
        this.$set(this.recommendList[index], 'imageLoaded', true);
      }
    },

    // 图片加载失败（普通img标签）
    onImageError(index) {
      if (this.recommendList[index]) {
        this.$set(this.recommendList[index], 'imageLoaded', true);
      }
    },

    // 封面图片加载成功（backgroundImage）
    onCoverLoad(index) {
      if (this.recommendList[index]) {
        this.$set(this.recommendList[index], 'coverLoaded', true);
      }
    },

    // 封面图片加载失败（backgroundImage）
    onCoverError(index) {
      if (this.recommendList[index]) {
        this.$set(this.recommendList[index], 'coverLoaded', true);
      }
    },

    // 头像图片加载成功（backgroundImage）
    onAvatarLoad(index) {
      if (this.recommendList[index]) {
        this.$set(this.recommendList[index], 'avatarLoaded', true);
      }
    },

    // 头像图片加载失败（backgroundImage）
    onAvatarError(index) {
      if (this.recommendList[index]) {
        this.$set(this.recommendList[index], 'avatarLoaded', true);
      }
    }
  },
  watch: {
    // 监听当前索引变化，检查图片是否已加载
    currentIndex() {
      this.$nextTick(() => {
        this.checkCurrentListImages();
      });
    },
    // 监听推荐列表变化，检查图片是否已加载
    recommendList: {
      handler() {
        this.$nextTick(() => {
          this.checkCurrentListImages();
        });
      },
      deep: true
    }
  },
  created() {
    // 初始化全局音频实例
    this.initAudio();

    // 获取屏幕宽度
    this.screenWidth = window.innerWidth;

    // 初始化加载前3天的数据
    this.initLoad();
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      this.screenWidth = window.innerWidth;
    });
  },
  updated() {
    // 当组件更新后，检查图片是否已加载
    this.$nextTick(() => {
      this.checkCurrentListImages();
    });
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('resize', () => {
      this.screenWidth = window.innerWidth;
    });
  }
}
</script>

<style scoped lang="less">
@import url('../assets/recommend-icon/iconfont.css');

#home {
  min-height: 100vh;
  box-sizing: border-box;
}

.header {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 6%;
  padding: 0 10px 10px;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .time {
    display: flex;
    align-items: end;
    height: 100%;

    .day {
      margin-right: 10px;
      transform: scaleY(1.5) translateY(-35%);
      transform-origin: top center;
    }

    .month-years {
      font-size: 8px;
    }
  }

  .temperature {
    height: 100%;
    font-size: 8px;
    color: #2c2c2c;
    display: flex;
    align-items: end;

    span:not(:first-child) {
      color: #ccc;
    }
  }
}

.main {
  position: absolute;
  left: 0;
  top: 6%;
  width: 100%;
  box-sizing: border-box;


  .part-one {
    width: 100%;
    padding: 0 15px 10px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 8px;

    .daily-recommend {
      width: 100%;
      min-height: 50vh;
      border-radius: 8px;
      position: relative;
      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.164);

      .recommend-img {
        width: 100%;
        position: relative;
        min-height: 200px;

        .skeleton-placeholder {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }

        .skeleton-img {
          width: 100%;
          height: 100%;

          .skeleton-image {
            width: 100%;
            min-height: 200px;
            background-color: #f2f3f5;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
          }
        }

        img {
          width: 100%;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          position: relative;
          z-index: 2;
        }
      }

      .photographer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        color: #dadada;
        padding: 10px 0;
        margin-bottom: 20px;
      }

      .recommend-text {
        line-height: 1.8;
        font-size: 12px;
        padding-left: 20px;
        margin-bottom: 10vh;
      }

      .recommend-text-author {
        padding-bottom: 20px;
        font-size: 8px;
        color: #dadada;
        display: flex;
        justify-content: center;
      }
    }

    .re-bottom {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 10px;
      padding: 15px 0;
      box-sizing: border-box;

      .left {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 5px;

        span {
          font-size: 10px;
          color: #cdcdcd;
        }

        i {
          margin-right: 3px;
        }
      }

      .right {
        width: 40vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 5px;

        .favorites {
          margin-left: -10px;
        }

        .like {
          display: flex;
          align-items: center;
          cursor: pointer;
          margin: -15px;
          color: #cdcdcd;

          i {
            margin-right: 3px;
          }
        }
      }
    }
  }

  .part-two,
  .part-three {
    padding: 10px 15px 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 5px;

    .category-name {
      font-size: 8px;
      color: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 10px;
    }

    .title {
      padding: 10px 0;
    }

    .author-name {
      font-size: 8px;
      color: #cdcdcd;
    }

    .forward {
      padding: 15px 0 10px;
      font-size: 10px;
      color: #aaaaaa;
    }

    .image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 10px;
      position: relative;
      min-height: 150px;

      .skeleton-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      .skeleton-img {
        width: 100%;
        height: 100%;

        .skeleton-image {
          width: 100%;
          min-height: 150px;
          border-radius: 8px;
          background-color: #f2f3f5;
        }
      }

      img {
        width: 100%;
        border-radius: 8px;
        position: relative;
        z-index: 2;
      }
    }

    .part-bottom {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: right;
      font-size: 8px;

      .right-icon {
        display: flex;
        align-items: center;
        gap: 25px;
        margin-right: 5px;

        .like {
          display: flex;
          align-items: center;
          cursor: pointer;
          color: #cdcdcd;

          i {
            margin-right: 3px;
          }
        }
      }
    }
  }

  .part-four {
    padding: 10px 15px 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;

    .category-name {
      font-size: 8px;
      color: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 10px;
    }

    .image-wrapper {
      width: 100%;
      height: 20vh;
      position: relative;

      .skeleton-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      .skeleton-img {
        width: 100%;
        height: 100%;

        .skeleton-image {
          width: 100%;
          height: 100%;
          border-radius: 8px;
          background-color: #f2f3f5;
        }
      }

      .image {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        z-index: 2;

        &.image-hidden {
          opacity: 0;
          pointer-events: none;
        }

        .part-four-title {
          position: absolute;
          left: 5%;
          bottom: 5%;
          font-size: 14px;
          color: #d8d5d5;
        }

        .play-icon {
          display: block;
          width: 20px;
          height: 20px;
          position: absolute;
          right: 5%;
          bottom: 5%;
          z-index: 50;
          background-image: url(../assets/play.svg);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }

    .part-bottom {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 8px;

      .left {
        color: #cecdcd;
        display: flex;
        align-items: center;

        .avatar-wrapper {
          width: 18px;
          height: 18px;
          position: relative;
          margin-right: 5px;

          .skeleton-placeholder-avatar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
          }

          .skeleton-avatar {
            width: 100%;
            height: 100%;

            .skeleton-avatar-image {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background-color: #f2f3f5;
            }
          }

          .avatar {
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            position: relative;
            z-index: 2;

            &.avatar-hidden {
              opacity: 0;
            }
          }
        }
      }

      .right-icon {
        display: flex;
        align-items: center;
        gap: 25px;
        margin-right: 5px;

        .like {
          display: flex;
          align-items: center;
          cursor: pointer;
          color: #cdcdcd;

          i {
            margin-right: 3px;
          }
        }
      }
    }
  }


  .main-bottom {
    width: 100%;
    height: 15vh;
    margin-top: 5px;
    background-color: #ffffffbe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cdcdcd;
    font-size: 10px;
  }
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;

  /* Firefox */
  &::-webkit-scrollbar {
    display: none;
  }
}

/* 可点击区域样式 */
.clickable-area {
  cursor: pointer;
  transition: opacity 0.2s ease;

  &:hover {
    opacity: 0.8;
  }

  &:active {
    opacity: 0.6;
  }
}
</style>